<template>
	<view class="content">
		<view class="commodity">
			<view class="title">退款商品</view>
			<view class="goodCon">
				<view class="goodsitem">
					<image :src="constData.orderItem[0].img_url" mode=""></image>
					<view class="text">{{ constData.orderItem[0].title }}</view>
				</view>
			</view>
			<view class="actual">实际付款: <text>￥{{ constData.payment_money }}</text></view>
		</view>

		<view class="commodity message">
			<view class="title">退款信息</view>
			<view class="amount">
				<view class="fonw">退款金额</view>
				<view class="reds" v-if="constData.product_type == 1 || constData.product_type == 22">￥{{
					constData.payment_money }}</view>
				<view class="reds" v-else>￥{{ constData.refundMoney }}</view>
			</view>
			<view @click="openList" class="refundReason">
				<view class="fonw">退款原因</view>
				<view class="xuanxing">
					<text>{{ reason }}</text>
					<image src="@/static/image/home/arrow.jpg" mode=""></image>
				</view>
			</view>
			<view class="describe">
				<view class="fonw">描述补充</view>
				<input v-model="note" placeholder="补充描述，有助于更好的处理售后问题。" type="text">
			</view>

			<view class="credentials">
				<view class="fonw">描述补充</view>
				<view class="duplicateTitle">最多上传3张</view>
			</view>

			<view class="picture">
				<image class="imageLis" v-for="item in imageList" :src="$setImgage(item)" mode=""></image>
				<view v-show="imageList.length < 3" @click="getUpload" class="upload">
					<image src="@/static/image/mylssue/camera.png" mode=""></image>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="bottom" background-color="#fff" :is-mask-click="false">
			<view class="popups">
				<view class="title_pop">退款原因</view>
				<view style="max-height: 56vh; overflow: auto; scroll-behavior: smooth;">
					<radio-group class="group">
						<view v-for="(item, index) in array" :key="index">
							<!-- 一级标题 -->
							<text class="oneTitle"> {{ item.refund_reason }} </text>

							<!-- 二级选项 -->
							<label v-for="(itema, indexa) in item.next" :key="indexa" @click="onCheck(itema.id, itema)">
								<view class="list_item">
									<text>{{ itema.refund_reason }}</text>
									<view>
										<radio style="transform: scale(0.7)" :value="itema.refund_reason"
											:checked="selectedId === itema.id" />
									</view>
								</view>

								<!-- 三级选项 (如果 next 不为空，则显示) -->
								<view v-if="selectedId === itema.id && itema.next.length > 0" class="threeReason">
									<view v-for="(itemb, indexb) in itema.next" :key="indexb" class="titledetails"
										:class="{ active: selectedIndex === indexb }"
										@click.stop="selectReason(indexb, itemb.refund_reason)">
										{{ itemb.refund_reason }}
									</view>
								</view>
							</label>
						</view>
					</radio-group>
				</view>
				<view @click="close" class="submit">确定</view>
			</view>
		</uni-popup>

		<view @click="applyRefund(constData.id)" class="submit">提交申请</view>
	</view>
</template>

<script>
import env from '@/utils/env.js'
import { getRefundReason, getOrderDetails, getRefund,cancelMake } from '@/api/home.js'
// const plugin = tt.requirePlugin('tta5a3d31e3aecfb9b11');
export default {
	data() {
		return {
			id: '',
			ishsow: false,
			imageList: [],
			array: [],
			current: 0,
			reason: '',
			constData: {},
			note: '',
			goodsList: [],
			selectedIndex: null,// 选中的索引,
			selectedId: null
		}
	},
	onLoad(option) {
		if (option.id) {
			this.id = option.id
		}
		this.rderDetails(this.id)
		this.refundReason()
	},
	methods: {
		onCheck(id, item) {
			if (this.selectedId !== id) {
				this.selectedId = id;
				this.reason = item.refund_reason;
				this.selectedIndex = null; // 重置三级选项
			}
		},
		selectReason(index, reason) {
			this.selectedIndex = index;
			this.reason = reason;
		},
		applyRefund(id) {
			if (this.constData.product_type == 15) {
				getRefund({
					id: id
				}).then(res => {
					if (res.code === 1) {
						this.$showToast('申请退款成功')
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						this.$showToast(res.msg)
					}
				})
			} else if (this.constData.book_status == 0) {
				uni.showModal({
					title: '提示',
					content: '退款申请已经提交请耐心等待，核实无误后1-3个工作日内，款项将原路退回。',
					success: (res) => { // 使用箭头函数
						if (res.confirm) {
							uni.showLoading({ title: '退款中...' }); // 显示加载中
							tt.applyRefund({
								refundInfo: {
									reason: [this.reason], // 确保 `this.reason` 有值
									note: this.note, // 备注 非必填
								},
								outOrderNo: this.constData.order_sn,
								itemOrderList: [
									{
										itemOrderId: this.constData.item_order_info_list[0].item_order_id,
										...(this.constData.product_type == 22 ? { refundAmount: Number(this.constData.payment_money) * 100 + Number(this.constData.discount)} : {})
									},
								],
								callbackData: {
									images: this.imageList,
								},
								success: (response) => {
									uni.hideLoading(); // 隐藏加载中
									this.$showToast('申请退款成功');
									setTimeout(() => {
										uni.navigateBack();
									}, 2000);
								},
								fail: (error) => {
									console.log(error)
									uni.hideLoading(); // 隐藏加载中
									this.$showToast('申请失败!');
								},
							});
						}
					},
				});
			} else if (this.constData.book_status == 1) {
				uni.showModal({
					title: '取消预约',
					content: '是否取消预约，取消预约后方可退款',
					success: (res) => {  // 使用箭头函数绑定this
						if (res.confirm) {
							uni.showLoading({ title: '退款中...' }); // 显示加载中
							cancelMake({
								id: this.constData.order_id  // 使用this
							}).then(res => {
								if (res.code === 1) {
									uni.hideLoading(); // 隐藏加载中
									this.$showToast('申请退款成功');
									setTimeout(() => {
										uni.navigateBack();
									}, 1000);
								} else {
									// 处理取消失败的情况，可以加上提示
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 1000
									});
								}
							}).catch(error => {
								// 捕获异常情况
								uni.showToast({
									title: '取消失败，请重试',
									icon: 'none',
									duration: 1000
								});
							});
						} else if (res.cancel) {
						}
					}
				});
			}
		},
		rderDetails(id) {
			getOrderDetails({
				id: id
			}).then(res => {
				if (res.code === 1) {
					this.constData = res.data
					this.constData.orderItem.forEach(element => {
						this.goodsList.push({
							quantity: element.quantity,
							goodsId: element.goods_id,
							goodsType: Number(element.goods_id_type)
						})
					});
				} else {
					this.$showToast(res.msg)
					uni.navigateBack()
				}
			})
		},
		refundReason() {
			getRefundReason().then(res => {
				if (res.code === 1) {
					this.array = res.data
					this.reason = res.data[50].next[0].refund_reason
				} else {
					uni.navigateBack()
				}
			})
		},
		close() {
			this.$refs.popup.close();
		},
		openList() {
			this.$refs.popup.open();
		},
		getUpload() {
			if (this.imageList.length >= 3) {
				this.$showToast('最多上传三个图片!')
				return false
			}
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					const localImagePath = res.tempFilePaths[0];
					uni.showLoading({
						title: '上传中~'
					});
					uni.uploadFile({
						url: env.baseUrl + '/api/common/upload',
						filePath: localImagePath,
						name: 'file',
						header: {
							"token": uni.getStorageSync('token')
						},
						success: (res) => {
							let group = JSON.parse(res.data)
							if (group.code === 1) {
								this.imageList.push(group.data.url)
							}
						},
						complete: () => {
							uni.hideLoading();
						}
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.popups {
	.threeReason {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
	}

	.titledetails {
		padding: 10rpx 20rpx;
		font-size: 12px;
		border-radius: 5rpx;
		background: #e5e5e5;
		/* 默认灰色背景 */
		color: #333;
		cursor: pointer;
	}

	.titledetails.active {
		background: #73c2fb;
		/* 选中后变蓝色 */
		color: white;
	}

	padding: 0 20rpx;
	max-height: 75vh;

	.group {
		// max-height: 56vh;
		// overflow: auto;
		// scroll-behavior: smooth;
		border-top: 2rpx solid #ccc;

		.oneTitle {
			font-size: 38rpx;
			font-weight: bold;
			padding: 20rpx 0;
		}
	}

	.title_pop {
		text-align: center;
		font-size: 34rpx;
		font-weight: bold;
		padding: 25rpx 0;
	}

	.list_item {
		display: flex;
		font-size: 30rpx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
}

.submit {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #f29100;
	border-radius: 20rpx;
	font-size: 32rpx;
	padding: 25rpx 0;
	margin-top: 40rpx;
}

.picture {
	background-color: #ffffff;
	display: flex;
	flex-wrap: wrap;
	margin-top: 20rpx;

	.imageLis {
		height: 180rpx;
		width: 180rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}

	.upload {
		height: 180rpx;
		width: 180rpx;
		border-radius: 20rpx;
		background-color: #c8c9cc;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
}

.content {
	padding: 20rpx 40rpx;

}

.message {
	margin-top: 30rpx;
	font-size: 32rpx;

	.credentials {
		margin-top: 40rpx;

		.duplicateTitle {
			color: #797979;
			margin-top: 30rpx;
			font-size: 30rpx;
		}
	}

	.describe {
		display: flex;
		align-items: center;
		margin-top: 40rpx;

		input {
			flex: 1;
			margin-left: 20rpx;
			text-align: right;
			border-bottom: #b6b6b6 1rpx solid;
			font-size: 28rpx;
		}
	}

	.fonw {
		font-weight: bold;
	}

	.refundReason {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 40rpx;

		.xuanxing {
			display: flex;
			align-items: center;

			text {
				color: #606266;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}
	}

	.amount {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 30rpx;
	}

	.reds {
		color: #c24268;
	}
}

.commodity {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 20rpx 30rpx;

	.title {
		font-weight: bold;
		font-size: 34rpx;
	}

	.actual {
		font-size: 32rpx;
		text-align: right;
		margin-top: 10rpx;

		text {
			color: #c24268;
		}
	}

	.goodCon {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 30rpx;

		.goodsitem {
			display: flex;
			flex: 1;

			image {
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
				border-radius: 10rpx;

			}

			.text {
				width: 74%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

	}
}
</style>
